<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
    <Shop
      :type="'component'"
      :select-shop-list="selectShopList"
      :multiple="true"
      @select-shops="selectShop"
    />
  </Dialog>
</template>
<script lang="ts" setup>
defineOptions({ name: 'ShopSelectDialog' })

const Shop = defineAsyncComponent(() => import('./ShopList.vue'))

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('商城选择') // 弹窗的标题
const selectShopList = ref() //选择的商城列表
const open = async (shopList?: any[]) => {
  dialogVisible.value = true
  dialogTitle.value = '商城选择'
  resetForm()
  selectShopList.value = shopList
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 使用选中的商城 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const selectShop = (shopList: any) => {
  selectShopList.value = shopList.value
  emit('success', selectShopList.value)
  dialogVisible.value = false
}
/** 重置表单 */
const resetForm = () => {
  selectShopList.value = []
}
</script>
